<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
    <style>
        /* 这里编写你的 CSS 规则 */
        body, html {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            justify-content: space-between;
            height: 100vh; /* 让容器占满整个视口高度 */
        }

        .left, .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            border: 1px solid #ccc;
            padding: 10px;
        }
        .center {
            flex: 0 0 40%; /* 占据 40% 的宽度 */
            display: flex;
            flex-direction: column;
            border: 1px solid #ccc;
            padding: 10px;
        }


        .box {
            height: 33%;
            /*background-color: lightblue;*/
            margin-bottom: 5px;
        }
        /* 添加一个样式来确定第一个盒子的位置和大小 */
        #left_top_chart, #left_center_chart, #left_low_chart,#right_top_chart,#right_center_chart,#right_low_chart {
            height: 33%;
            /*background-color: lightblue;*/
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">
        <div id="left_top_chart" class="box"></div>
        <div id="left_center_chart" class="box"></div>
        <div id="left_low_chart" class="box"></div>
    </div>
    <div class="center">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="right">
        <div id="right_top_chart" class="box"></div>
        <div id="right_center_chart" class="box"></div>
        <div id="right_low_chart" class="box"></div>
    </div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('left_top_chart'));

    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            type: 'category',
            data: ['A', 'B', 'C']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150],
                type: 'line'
            }
        ]
    };

    myChart.setOption(option);

</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart_1 = echarts.init(document.getElementById('left_center_chart'));

    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            type: 'category',
            data:['A', 'B', 'C']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150],
                type: 'line'
            }
        ]
    };
    var days = [];
    var nums = [];
    $.ajax({
        type: "get",
        url: "/daydate/all", // 假设按照不同的type发送请求
        contentType: "application/json",
        success: function (res) {
            console.log("=====res: =======")
            console.log(res);
            for (var i = 0; i < res.length; i+=30) {
                var date = new Date(res[i].day);
                var formattedDate = date.toISOString().split('T')[0]; // 提取日期部分

                days.push(formattedDate);
                nums.push(res[i].num);
            }
            myChart_1.setOption({
                xAxis: {
                    data: days
                },
                series: [{
                    data: nums // 根据按钮类型决定更新的数据
                }]
            });
        }
    });
    myChart_1.setOption(option);


    // myChart.setOption(option);
    // 处理按钮点击事件的函数
    function showData(type) {
        var days = [];
        var nums = [];
        $.ajax({
            type: "get",
            url: "/daydate/all", // 假设按照不同的type发送请求
            contentType: "application/json",
            success: function (res) {
                console.log("=====res: =======")
                console.log(res);
                // if (type === 'day') {
                //     for (var i = 0; i < res.length; i++) {
                //         var date = new Date(res[i].day);
                //         var formattedDate = date.toISOString().split('T')[0]; // 提取日期部分
                //
                //         days.push(formattedDate);
                //         nums.push(res[i].num);
                //     }
                // }
                // if (type === 'week') {
                //     for (var i = 0; i < res.length; i+=7) {
                //         var date = new Date(res[i].day);
                //         var formattedDate = date.toISOString().split('T')[0]; // 提取日期部分
                //
                //         days.push(formattedDate);
                //         nums.push(res[i].num);
                //     }
                // }
                // if (type === 'month') {
                for (var i = 0; i < res.length; i+=30) {
                    var date = new Date(res[i].day);
                    var formattedDate = date.toISOString().split('T')[0]; // 提取日期部分

                    days.push(formattedDate);
                    nums.push(res[i].num);
                }
                // }

                myChart_1.setOption({
                    xAxis: {
                        data: days
                    },
                    series: [{
                        // name: '按日',
                        data: nums // 根据按钮类型决定更新的数据
                    }]
                });
            }
        });

        // 使用刚指定的配置项和数据显示图表。
        myChart_1.setOption(option);
    }
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('left_low_chart'));

    // 指定图表的配置项和数据
    var option = {
        series: [
            {
                type: 'pie',
                data: [
                    {
                        value: 335,
                        name: '直接访问'
                    },
                    {
                        value: 234,
                        name: '联盟广告'
                    },
                    {
                        value: 1548,
                        name: '搜索引擎'
                    }
                ]
            }
        ]
    };

    myChart.setOption(option);

</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('right_top_chart'));

    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        },
        yAxis: {},
        series: [
            {
                type: 'scatter',
                data: [220, 182, 191, 234, 290, 330, 310]
            }
        ]
    };

    myChart.setOption(option);

</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('right_center_chart'));

    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            type: 'category',
            data: ['A', 'B', 'C']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150],
                type: 'line'
            }
        ]
    };

    myChart.setOption(option);

</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('right_low_chart'));

    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
            {
                data: [10, 22, 28, 43, 49],
                type: 'line',
                stack: 'x'
            },
            {
                data: [5, 4, 3, 5, 10],
                type: 'line',
                stack: 'x'
            }
        ]
    };

    myChart.setOption(option);

</script>


</body>
</html>